<template>
  <h1 v-if="r===null">
    答题记录加载中
  </h1>
  <div v-else class="r-p-container">
    <h2>答题记录</h2>
    <h3 v-if="problem === null">题目加载中</h3>
    <h3 v-else class="r-p-problem">
      <router-link :to="'/work/'+problem.id">
        题目 : {{problem.name}}
      </router-link>
    </h3>
    <div class="ques-row">
      <el-row style="display: flex;align-items: center">
        <el-col :span="5">
          <el-tag :type="getStatusTagType(r.status)">
            {{getStatusName(r.status)}}
          </el-tag>
        </el-col>
        <el-col :span="4">{{ (r.timeUsed / 1000000).toFixed(2)}}ms</el-col>
        <el-col :span="4">{{ (r.spaceUsed / 1000000).toFixed(2)}}MB</el-col>
        <el-col :span="4">
          {{getLanguageName(r.language)}}
        </el-col>
        <el-col :span="7" >
          {{ new Date(r.time * 1000).toLocaleString() }}
        </el-col>
      </el-row>
    </div>
    <h3>代码：</h3>
    <code class="r-p-code">
      <pre>{{r.code}}</pre>
    </code>
  </div>

</template>

<script>
import {Record} from "../utils/http/record";
import {Problem} from "../utils/http/problem";
import {toRaw} from "@vue/reactivity";
import {loader} from "../gloable/loader";

export default {
  name: "RecordDetail",
  data : function () {
    return {
      r : null,
      problem : null
    }
  },
  methods:{
    async refresh(){
      let resp = await Record.getById(parseInt(this.$route.params.recordId))
      if (resp.success){
        if (!resp.data.code){
          this.$error("该题解不存在！")
          return
        }
        this.r = resp.data
        resp = await Problem.getById(resp.data.pid)
        this.problem = resp.data
      }else {
        this.$error("加载答题记录失败:"+resp.message)
      }
    },
    getLanguageName(id){
      return Record.getLanguageName(id)
    },
    getStatusName(id){
      return Record.getStatusDetail(id)
    },
    getStatusTagType(id){
      return Record.getStatusTag(id);
    }
  },
  mounted() {
    this.refresh();
  },
  watch: {
    $route(to, from) {
      if (to.name === 'record')
        this.refresh()
    }
  }
}
</script>

<style scoped>
.r-p-container{
  width: 1000px;
  margin: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.r-p-problem{

}
.r-p-code{
  text-align: left;
  width: 600px;
  font-size: 18px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .26);
  padding: 20px;
}

.ques-row{
  padding: 10px 0;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
  border-bottom: 1px solid #eee;
  margin-top: 10px;
  width: 100%;
}
</style>
